/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-05-10 09:21:00
 * @LastEditTime: 2023-11-10 16:10:23
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Badge, Box } from '@chakra-ui/react';
import { useAppSelector } from 'store/storeHooks';
import { useTranslation } from 'react-i18next';
import { ResourceKey } from 'i18next';
import { useMemo } from 'react';
const DARK_COLOR_MAP = {
  ok: 'green.400',
  working: 'yellow.400',
  error: 'red.400',
};

const LIGHT_COLOR_MAP = {
  ok: 'green.600',
  working: 'yellow.500',
  error: 'red.500',
};
export default function SocketStatus() {
  const { t } = useTranslation();

  const { isConnected, isProcessing, statusTranslationKey } = useAppSelector(
    (state) => state.system
  );
  const statusColor = useMemo(() => {
    if (!isConnected) {
      return 'error';
    }

    if (isProcessing) {
      return 'working';
    }

    return 'ok';
  }, [isProcessing, isConnected]);
  return (
    <Box position="absolute" bottom="0" left="1" zIndex="9999" p="1">
      <Badge
        sx={{
          fontSize: 'sm',
          fontWeight: '600',
          userSelect: 'none',
          color: LIGHT_COLOR_MAP[statusColor],
          _dark: { color: DARK_COLOR_MAP[statusColor] },
        }}
      >
        {t(statusTranslationKey as ResourceKey)}
      </Badge>
    </Box>
  );
}
